import echarts from 'echarts'

// 静态属性，样式属性，剥离数据 多种屏幕尺寸都事先部署好

const staticOption = {
  baseOption: {
    timeline: {
      axisType: 'category',
      autoPlay: false,
      playInterval: 3000,
      bottom: '7%',
      left: '10%',
      right: '5%',
      symbol: 'emptyCircle',
      symbolSize: 15,
      data: [],
      lineStyle: {
        color: '#bad3ff'
      },
      label: {
        color: '#bad3ff',
        fontSize: 24,
        interval: 0,
        padding: [0, 0, -30, 0],
        formatter: function (s) {
          return (new Date(s)).getFullYear()
        }
      },
      checkpointStyle: {
        color: '#00fffc',
        symbolSize: 20,
        borderWidth: 15,
        borderColor: 'rgba(0, 255, 252, 0.3)'
      },
      controlStyle: {
        color: '#bad3ff',
        borderColor: '#bad3ff',
        itemSize: 36,
        showPlayBtn: false
      },
      emphasis: {
        controlStyle: {
          borderColor: '#d6e1ff'
        },
        label: {
          color: '#bad3ff',
          fontSize: 24,
          padding: [0, 0, -30, 0]
        },
        itemStyle: {
          color: '#bad3ff'
        }
      }
    },
    tooltip: {},
    legend: {
      x: 'center',
      top: '6%',
      data: [],
      textStyle: {
        color: '#d9e7ff',
        fontSize: 24
      },
      itemWidth: 20,
      itemHeight: 6
    },
    dataZoom: [{
      type: 'inside',
      minValueSpan: 4
    }],
    calculable: true,
    grid: {
      left: '7%',
      right: '7%',
      bottom: '16%',
      top: '12%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        axisLabel: {
          fontSize: 22,
          color: '#94aad4',
          interval: 0
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#4876c7'
          }
        },
        data: [],
        splitLine: {show: false}
      }
    ],
    yAxis: [
      {
        type: 'value',
        axisLabel: {
          fontSize: 22,
          color: '#94aad4',
          interval: 0
        },
        axisTick: {show: false},
        axisLine: {
          lineStyle: {
            color: '#05388f'
          }
        },
        splitLine: {
          lineStyle: {
            color: '#4876c7'
          }
        }
      }
    ],
    series: [
      {
        type: 'bar',
        barMaxWidth: '20',
        barGap: '80%',
        label: {
          show: true,
          position: 'top',
          color: '#007aff',
          fontSize: 16
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            // 0% 处的颜色
            offset: 0,
            color: '#007aff'
          }, {
            // 100% 处的颜色
            offset: 1,
            color: '#00afff'
          }
          ], false),
          barBorderRadius: [5, 5, 0, 0]
        }
      },
      {
        type: 'bar',
        barMaxWidth: '20',
        label: {
          show: true,
          position: 'top',
          color: '#19c1a4',
          fontSize: 16
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            // 0% 处的颜色
            offset: 0,
            color: '#19c1a4'
          }, {
            // 100% 处的颜色
            offset: 1,
            color: '#4adecd'
          }
          ], false),
          barBorderRadius: [5, 5, 0, 0]
        }
      },
      {
        type: 'bar',
        barMaxWidth: '20',
        label: {
          show: true,
          position: 'top',
          color: '#fdb944',
          fontSize: 16
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            // 0% 处的颜色
            offset: 0,
            color: '#fdb944'
          }, {
            // 100% 处的颜色
            offset: 1,
            color: '#fed981'
          }
          ], false),
          barBorderRadius: [5, 5, 0, 0]
        }
      },
      {
        type: 'bar',
        barMaxWidth: '20',
        label: {
          show: true,
          position: 'top',
          color: '#f94d64',
          fontSize: 16
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            // 0% 处的颜色
            offset: 0,
            color: '#f94d64'
          }, {
            // 100% 处的颜色
            offset: 1,
            color: '#fc889d'
          }
          ], false),
          barBorderRadius: [5, 5, 0, 0]
        }
      },
      {
        name: '数据监控',
        type: 'pie',
        center: ['75%', '24%'],
        radius: ['0'],
        label: {
          fontSize: 22
        }
      },
      {
        name: '阴影',
        type: 'pie',
        center: ['75%', '24%'],
        radius: ['0'],
        label: {
          show: false
        },
        itemStyle: {
          opacity: 0.3
        },
        silent: true
      }
    ]
  },
  options: []
}

const staticOptionMid = {
  baseOption: {
    timeline: {
      axisType: 'category',
      autoPlay: false,
      playInterval: 3000,
      bottom: '5%',
      left: '10%',
      right: '5%',
      symbol: 'emptyCircle',
      symbolSize: 10,
      data: [],
      lineStyle: {
        color: '#bad3ff'
      },
      label: {
        color: '#bad3ff',
        fontSize: 18,
        interval: 0,
        padding: [0, 0, -30, 0],
        formatter: function (s) {
          return (new Date(s)).getFullYear()
        }
      },
      checkpointStyle: {
        color: '#00fffc',
        symbolSize: 15,
        borderWidth: 10,
        borderColor: 'rgba(0, 255, 252, 0.3)'
      },
      controlStyle: {
        color: '#bad3ff',
        borderColor: '#bad3ff',
        itemSize: 24,
        showPlayBtn: false
      },
      emphasis: {
        controlStyle: {
          borderColor: '#d6e1ff'
        },
        label: {
          color: '#bad3ff',
          fontSize: 18,
          padding: [0, 0, -30, 0]
        },
        itemStyle: {
          color: '#bad3ff'
        }
      }
    },
    tooltip: {},
    legend: {
      x: 'center',
      top: '6%',
      data: [],
      textStyle: {
        color: '#d9e7ff',
        fontSize: 18
      },
      itemWidth: 20,
      itemHeight: 6
    },
    dataZoom: [{
      type: 'inside',
      minValueSpan: 4
    }],
    calculable: true,
    grid: {
      left: '4%',
      right: '7%',
      bottom: '16%',
      top: '12%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        axisLabel: {
          fontSize: 18,
          color: '#94aad4',
          interval: 0
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#4876c7'
          }
        },
        data: [],
        splitLine: {show: false}
      }
    ],
    yAxis: [
      {
        type: 'value',
        axisLabel: {
          fontSize: 18,
          color: '#94aad4',
          interval: 0
        },
        axisTick: {show: false},
        axisLine: {
          lineStyle: {
            color: '#05388f'
          }
        },
        splitLine: {
          lineStyle: {
            color: '#4876c7'
          }
        }
      }
    ],
    series: [
      {
        type: 'bar',
        barMaxWidth: '20',
        label: {
          show: true,
          position: 'top',
          color: '#007aff',
          fontSize: 12
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            // 0% 处的颜色
            offset: 0,
            color: '#007aff'
          }, {
            // 100% 处的颜色
            offset: 1,
            color: '#00afff'
          }
          ], false),
          barBorderRadius: [3, 3, 0, 0]
        }
      },
      {
        type: 'bar',
        barMaxWidth: '20',
        label: {
          show: true,
          position: 'top',
          color: '#19c1a4',
          fontSize: 12
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            // 0% 处的颜色
            offset: 0,
            color: '#19c1a4'
          }, {
            // 100% 处的颜色
            offset: 1,
            color: '#4adecd'
          }
          ], false),
          barBorderRadius: [3, 3, 0, 0]
        }
      },
      {
        type: 'bar',
        barMaxWidth: '20',
        label: {
          show: true,
          position: 'top',
          color: '#fdb944',
          fontSize: 12
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            // 0% 处的颜色
            offset: 0,
            color: '#fdb944'
          }, {
            // 100% 处的颜色
            offset: 1,
            color: '#fed981'
          }
          ], false),
          barBorderRadius: [3, 3, 0, 0]
        }
      },
      {
        type: 'bar',
        barMaxWidth: '20',
        label: {
          show: true,
          position: 'top',
          color: '#f94d64',
          fontSize: 12
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            // 0% 处的颜色
            offset: 0,
            color: '#f94d64'
          }, {
            // 100% 处的颜色
            offset: 1,
            color: '#fc889d'
          }
          ], false),
          barBorderRadius: [3, 3, 0, 0]
        }
      },
      {
        name: '数据监控',
        type: 'pie',
        center: ['75%', '24%'],
        radius: ['0'],
        label: {
          fontSize: 18
        }
      },
      {
        name: '阴影',
        type: 'pie',
        center: ['75%', '24%'],
        radius: ['0'],
        label: {
          show: false
        },
        itemStyle: {
          opacity: 0.3
        },
        silent: true
      }
    ]
  },
  options: []
}

// 备选颜色，有需求则进行循环

// const colors = ['#007aff', '#19c1a4', '#fdb944', '#f94d64']
// let colorIndex = 0

// 获取设备宽度
const screen = window.screen.width

class ChartFactory {
  constructor (additionalOptions) {
    // 根据屏幕宽度获取不同配置的echarts配置
    this.option = staticOption
    if (screen < 1920 && screen > 1200) {
      this.option = staticOptionMid
    }
    // 下方复制属于浅拷贝，指向同个内存，针对可能有更改的需求，要进行一次清理
    this.clear()
    // colorIndex = 0
    // 装配数据 必须使用箭头函数
    let yAixsMax = 0
    this.option.baseOption.timeline.data = additionalOptions.timelineLabel
    this.option.baseOption.legend.data = additionalOptions.legendData
    this.option.baseOption.timeline.autoPlay = additionalOptions.timelineAutoPlay
    this.option.baseOption.timeline.playInterval = additionalOptions.playInterval
    this.option.baseOption.xAxis[0].data = additionalOptions.xAxisData
    additionalOptions.timelineLabel.forEach((value, index) => {
      let tempSeries = {
        series: [
          {name: '已完成', data: []},
          {name: '加载中', data: []},
          {name: '队列中', data: []},
          {name: '错误', data: []},
          {
            data: [
              {
                name: '已完成',
                value: [],
                itemStyle: {
                  color: '#007aff'
                }
              },
              {
                name: '加载中',
                value: [],
                itemStyle: {
                  color: '#19c1a4'
                }
              },
              {
                name: '队列中',
                value: [],
                itemStyle: {
                  color: '#fdb944'
                }
              },
              {
                name: '错误',
                value: [],
                itemStyle: {
                  color: '#f94d64'
                }
              }
            ]
          },
          {
            data: [
              {
                name: '已完成',
                value: [],
                itemStyle: {
                  color: '#007aff'
                }
              },
              {
                name: '加载中',
                value: [],
                itemStyle: {
                  color: '#19c1a4'
                }
              },
              {
                name: '队列中',
                value: [],
                itemStyle: {
                  color: '#fdb944'
                }
              },
              {
                name: '错误',
                value: [],
                itemStyle: {
                  color: '#f94d64'
                }
              }
            ]
          }
        ]
      }
      tempSeries.series[0].data = additionalOptions.seriesData[index].finished
      tempSeries.series[1].data = additionalOptions.seriesData[index].loading
      tempSeries.series[2].data = additionalOptions.seriesData[index].inQueue
      tempSeries.series[3].data = additionalOptions.seriesData[index].hasError
      tempSeries.series[4].data[0].value = additionalOptions.seriesData[index].finished.reduce((total, number) => total + number)
      tempSeries.series[4].data[1].value = additionalOptions.seriesData[index].loading.reduce((total, number) => total + number)
      tempSeries.series[4].data[2].value = additionalOptions.seriesData[index].inQueue.reduce((total, number) => total + number)
      tempSeries.series[4].data[3].value = additionalOptions.seriesData[index].hasError.reduce((total, number) => total + number)
      tempSeries.series[5].data[0].value = additionalOptions.seriesData[index].finished.reduce((total, number) => total + number)
      tempSeries.series[5].data[1].value = additionalOptions.seriesData[index].loading.reduce((total, number) => total + number)
      tempSeries.series[5].data[2].value = additionalOptions.seriesData[index].inQueue.reduce((total, number) => total + number)
      tempSeries.series[5].data[3].value = additionalOptions.seriesData[index].hasError.reduce((total, number) => total + number)
      this.option.options.push(tempSeries)
      // 设置Y轴最大值
      let tempMax = [
        Math.max(...additionalOptions.seriesData[index].finished),
        Math.max(...additionalOptions.seriesData[index].loading),
        Math.max(...additionalOptions.seriesData[index].inQueue),
        Math.max(...additionalOptions.seriesData[index].hasError)
      ]
      yAixsMax = Math.max(...tempMax)
      this.option.baseOption.yAxis[0].max = parseInt((yAixsMax) / 1000) * 1000
    })
  }

  // 清理方法，要将部署的新数据全部置空
  clear () {
    this.option.baseOption.timeline.data = []
    this.option.baseOption.legend.data = []
    this.option.options = []
  }

  getOption () {
    return this.option
  }
}

export { ChartFactory }
